<%--
  Created by IntelliJ IDEA.
  User: dong_
  Date: 2021/5/17
  Time: 10:30
  To change this template use File | Settings | File Templates.
--%>
<%--用户模块--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="toolbarDemo.jsp"%>
<%@include file="user-add-layer.jsp"%>
<%@include file="user-edit-layer.jsp"%>
<%@include file="searchForm.jsp"%>


<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="user-edit-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-user">编辑</a>
</script>

<script>
    layui.use(['table','layer','form','laydate'], function(){
        // 开始部分
        var table = layui.table;
        var layer = layui.layer;
        var $= layui.$;
        var form= layui.form;
        var laydate=layui.laydate;
        // 把表格渲染到页面上
        table.render({
            elem: '#test'
            ,url:'/user/getAllUsers',
            //工具栏
            toolbar:'#toolbarDemo'
            //表头
            ,cols: [[
                {type:'checkbox'}
                ,{field:'id', title: 'ID', sort: true}
                ,{field:'name', title: '用户名'}
                ,{field:'sex', title: '性别', sort: true,templet:function (data) {
                        return data.sex == '1'?'男':'女';
                    }}
                ,{field:'password', title: '密码'}
                ,{field:'birthday', title: '生日'}
                ,{field:'registTime', title: '注册日期', sort: true}
                ,{field:'operate', title: '操作',toolbar: '#user-edit-bar',width:180}
            ]]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                ,limit: 2
                ,limits: [2, 4, 6, 8, 10]
            }
        });
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            debugger
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    openEditWindow(null);
                    break;
                case 'delete':
                    debugger
                    var data = table.checkStatus('test').data;
                    if (data.length > 0) {
                        layer.confirm('真的删除行么', function (index) {
                            var param = ""
                            $.each(data, function (i, obj) {
                                param += "&ids=" + obj.id
                            })
                            $.ajax({
                                url: '/user/del',
                                data: param,
                                method: 'post',
                                success: function (result) {
                                    if (result.status) {
                                        table.reload('test', {});
                                    } else {
                                        alert(result.message)
                                    }
                                    layer.close(index);
                                }
                            })
                        });
                    }
                    break;
            }
        });

        //打开一个弹出窗口,当data为空的时侯,代表新增,当data不为空的时候代表修改
        function openEditWindow(data) {
           //弹出一个窗口
           layer.open({
                type: 1
               //标题
               ,title:'编辑'
               //宽高
               ,area: ['500px', '300px']
               //弹出框的内容
               ,content: data == null?$('#user-add-layer').html():$('#user-edit-layer').html()
               ,btn: ['提交', '取消']
               //弹出后的成功回调方法
               ,success: function(layero, index){
                   form.render();//显示表单组件
                   //执行一个laydate实例
                   laydate.render({
                       elem: '#birthday' //指定元素(添加页面id)
                   });
                   laydate.render({
                       elem: '#registTime' //指定元素(添加页面id)
                   });
                   laydate.render({
                       elem: '#birthday1' //指定元素(修改界面id)
                   });
                   laydate.render({
                       elem: '#registTime1' //指定元素(修改界面id)
                   });
                   // 为编辑模式填充数据
                   if (data != null) {
                       form.val("user-edit-form", data);
                   }
               }
               //确定按钮回调方法
               ,yes: function(index, layero){
                   $.ajax({
                       url: "/user/" + (data == null ? 'add' : 'update'),
                       //  url: '/sys/customer/update'
                       //id=1&name=jack
                       data: data == null ?$("#user-add-form").serialize():$("#user-edit-form").serialize(),
                       method: 'post',
                       success: function (result) {
                           if (result.status) {
                               table.reload('test', {});
                               layer.close(index);
                           } else {
                               alert(result.message)
                           }
                           layer.closeAll('loading');
                       }
                   });
               }
           });
        }

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'edit-user': {
                    openEditWindow(data);
                    break;
                }

            }
        });


        //自定义验证规则
        form.verify({
            name: function(value){
                if(value.length < 2 && value.length>0){
                    return 'name至少得2个字符啊';
                }
            }
            // ,pass: [
            //     /^[\S]{6,12}$/
            //     ,'密码必须6到12位，且不能出现空格'
            // ]
        });

        //监听提交
        form.on('submit(user-search)', function(data){
            debugger
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            table.reload('test', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: data.field
            });
            return false;
        });

        form.render();
        // 结束部分
    });
</script>